接下來要提到的是，選取與控制元件的方式，以及各個元件有各自獨特的功能語法。

• 選取與控制元件，涉及到後續要以CSS美化(渲染)，或是以JavaScript寫入功能以進行網頁互動，是相當重要的概念！
• 至於元件各自的獨特功能語法，雖然也很重要，但概念相對較簡單，基本上就是去查該元件特定的語法就好，而現在有ChatGPT的補助，這部分的功能查找相對簡單很多，之後僅介紹幾個常用的元件，如<select>、<option>。

選取與控制元件

前面提到，HTML元件呈現的方式，通常以兩兩為一組，如<div></div>，當網頁中有多組但都同樣為div的元件，要如何正確選取到想要控制的元件，就是相當關鍵的問題，尤其在正常網頁中，元件數量常常都雙位數起跳，選取特定元件，就更顯得非常重要！

此時，元件的屬性就發揮作用了，通常呈現如後的例子，<div class=”block1”></div>，這裡用到的是class屬性，而命名class的名稱為block1。另外，也可以以此方式，<div id=”block1”></div>，這裡用到的是id屬性，命名id的名稱為block1。

在初學時，會覺得這兩種屬性選擇方法，功能都一樣，但其實在了解兩者的特性後，會發現兩者在實用上，各有各自的優點

• 首先，兩者最大的差異在於，id屬性的名稱只能唯一，也就是單一組元件專屬使用，而class屬性的名稱，則可以給不同組元件共用。
• 依此特性，就衍生出不同使用方式，當你想要選擇的元件組，想要統一樣式(顏色、大小等)，此時可以選擇使用class屬性，單一class屬性名稱，給不同組元件使用，一次更改所有同樣class名稱的元件。
• 若你想要選擇的元件，只有特定的一個，或是不想要被其他屬性干擾，那就直接使用id屬性，可以大幅度避免不小心選擇到，導致後續操作全部混在一起的窘境。

特定元件的屬性語法

接下來，針對幾個特定元件的屬性語法，茲舉幾個常見者介紹。

1. <form>、<label>及<input>，通常會連袂出現，用於提供表單給瀏覽者填寫
   通常最外層，先以<form> </form>包住內層所有元件，代表該表單需填寫的內容；內層則以<label></label>及<input></input>，兩個元件為一組進行搭配，如下：

   <label for="usr">使用者名稱：</label>
   <input type="text" id="usr" name="username">
   

   • for屬性及id屬性，名稱需相同，當點擊label元件時，因為兩者名稱相同，可以聚焦在對應名稱的input元件
   • input元件提供不同的type屬性，如”text”，提供網頁使用者輸入文字，或者”password’，輸入密碼，以及”submit"，供送出表單內容等，相關的屬性名稱，可參考w3schools
   • name屬性，則是與使用者輸入完成後，進行填寫資料傳輸時，所給予的儲存變數名稱，與後端操作相關

2. <label>、<select>及<option>，通常會同時出現，可提供下拉式選單供使用者選取

   <label for="city">選擇城市：</label>
   <select id="city" name="cityname">
       <option value="taipei">台北市</option>
       <option value="taichung">台中市</option>
       <option value="kaohsiung">高雄市</option>
   </select>
   

   • label元件，for屬性用來對應id屬性名稱的選單元件，進行標示與說明
   • 外層以<select>元件，包住內層的<option>元件，內層，則提供不同的選項
   • name屬性，供資料傳輸的變數名稱使用，該變數中的取值，取決於下拉式選項的選擇，使用者選擇後，並將選擇結果儲存於value屬性，以進行數據傳輸，亦與後端操作相關